<%--
  Created by IntelliJ IDEA.
  User: 14274
  Date: 2023/8/8
  Time: 16:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="main wrapper">
    <div class="main wrapper">
        <h1>智慧校园管理系统</h1>
        <!-- 登录 -->
        <div class="login wrapper">
            <div class="loginmiddle wrapper">
                <!-- 表单验证 -->
                <form action="login?methodName=Login" method="post" onsubmit="return checkForm()">
                    <!-- 文本框 单选按钮 -->
                    <input type="text" name="name" id="names" class="shuru" placeholder="姓名" onblur="checkName()"><span id="nspan" style="color: #ff0000"></span><br/>
                    <input type="password" name="psw" id="psw" class="shuru" placeholder="密码/学号/工号"onblur="checkPsw()"><span id="pspan" style="color: red"></span>
                    <input type="hidden" name="role" value="" id="roles"/>
                    <img src="imgs/psw01.png" id="eye"><br/>
                    <!-- 单选按钮 -->
                    <div class="rio">
                        <input type="radio" name="sex" class="sex" id="stu"><label for="stu">学生</label>
                        <input type="radio" name="sex" class="sex1" id="tch"><label for="tch">教师</label>
                        <input type="radio" name="sex" class="sex1" id="adm"><label for="adm" checked="checked">管理员</label>
                        <a href="#" class="ftp">忘记密码</a>
                    </div>
                    <br/>
                    <input type="submit" value="登  录" class="reg" id="but">
                </form>
            </div>
            <img src="imgs/图层.png">
        </div>
    </div>
</div>
</body>
</html>
<%--导入jQuery脚本--%>
<script src="js/login.js"></script>
<script src="js/flexible.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $("#stu").click(function (){
        $("#roles").val("sex1");
    })
    $("#tch").click(function (){
        $("#roles").val("sex2");
    })
    $("#adm").click(function (){
        $("#roles").val("sex3");
    })
    //校验账号
    function checkName(){
        var uname = $("#names").val();
        if (uname.trim()==""){
            $("#nspan").html("账号不能为空");
            return false;
        }else {
            $("#nspan").html("√");
            return true;
        }
    }
    //校验密码
    function checkPsw(){
        var upsw = $("#psw").val();
        if (upsw.trim()==""){
            $("#pspan").html("密码不能为空");
            return false;
        }else {
            $("#pspan").html("√");
            return true;
        }
    }
    //    表单验证
    function checkForm(){
        var flag=true;
        if (!checkName()) flag=false;
        if (!checkPsw()) flag=false;
        return flag;
    }
</script>